<template>
    <div>
        <flexbox justify="space-between">
            <flexbox>
                <flexbox class="cell-item">
                    <h-dic-select type="issueType" title="类型" :defaultOptions="dicObj.issueType" v-model:value="form.issueType" />
                    <a-select placeholder="同步状态" :disabled="disabled" allowClear style="min-width: 120px; margin-left: 8px" v-model:value="form.syncStatus" v-if="isSync">
                        <a-select-option :key="elem.code" v-for="elem of dicObj.syncStatus">
                            {{ elem.dimensionName }}
                        </a-select-option>
                    </a-select>
                    <a-select placeholder="状态" :disabled="disabled" allowClear style="min-width: 120px; margin-left: 8px" v-model:value="form.status" v-else>
                        <a-select-option :key="elem.code" v-for="elem of dicObj.status">
                            {{ elem.dimensionName }}
                        </a-select-option>
                    </a-select>
                    <h-search-select-cell :disabled="disabled" allowClear placeholder="请输入版本号" v-model:value="form.fixVersion" type="jiraVersion" :searchQuery="{ systemId: detail.id, field: 'fixVersion' }" style="margin-left: 8px; min-width: 200px" />
                </flexbox>
                <a-input class="cell-item" :disabled="disabled" allowClear placeholder="请输入关键字" v-model:value="searchKeyword" style="max-width: 300px" />
                <a-button type="primary" :disabled="disabled" @click="handleSearch">搜索</a-button>
                <a-button class="margin-l-8" :disabled="disabled" @click="handleReset">重置</a-button>
            </flexbox>
            <slot name="extra" />
        </flexbox>
    </div>
</template>

<script lang="ts">
import { HSearchSelectCell, HDicSelect } from '@/components';
import api from '@/api';
import { defineComponent, ref, unref, watch } from 'vue';
export default defineComponent({
    components: { HSearchSelectCell, HDicSelect },
    props: {
        detail: {
            type: Object,
            default: () => ({})
        },
        isSync: {
            type: Boolean,
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    emits: ['search'],
    setup(props, { emit }) {
        const form: any = ref({
            issueType: null,
            status: null,
            syncStatus: null,
            fixVersion: null
        });
        const showFieldMaxNum = ref<number>(5);
        const searchKeyword = ref<string>('');
        const dicObj = ref<any>({ status: [], issueType: [], syncStatus: [] });
        // 重置搜索条件
        const handleReset = () => {
            form.value = {
                issueType: null,
                status: null,
                syncStatus: null,
                fixVersion: null
            };
            searchKeyword.value = '';
        };
        const handleSearch = () => {
            emit('search', {
                ...unref(form),
                summary: searchKeyword.value
            });
        };
        const getDicOptions = () => {
            // 获取字典值
            Promise.all([
                api.jiraIssueModel.getFieldValueFromData({
                    systemId: props.detail.id,
                    field: 'status'
                }),
                api.jiraIssueModel.getFieldValueFromData({
                    systemId: props.detail.id,
                    field: 'issueType'
                }),
                api.jiraIssueModel.getFieldValueFromData({
                    systemId: props.detail.id,
                    field: 'syncStatus'
                })
            ]).then((res) => {
                Object.keys(unref(dicObj)).forEach((key, index) => {
                    if (res[index].success) {
                        dicObj.value[key] = res[index].moule.map((item) => ({
                            dimensionName: item,
                            code: item
                        }));
                    } else {
                        dicObj.value[key] = [];
                    }
                });
            });
        };
        watch(
            form,
            () => {
                handleSearch();
            },
            { deep: true }
        );
        getDicOptions();
        return {
            form,
            dicObj,
            searchKeyword,
            showFieldMaxNum,
            handleSearch,
            handleReset
        };
    }
});
</script>
<style scoped lang="less">
.cell-item {
    font-size: 14px;
    cursor: pointer;
    color: #344563;
    margin-right: 8px;
}
</style>